<template>
  <div class="business">
    <div class="home-top" :class="{'ispc':mobile==2}">
      <img src="../../assets/images/blcimg/homelogo.png" alt="" class="home-icon"
           @click="$router.push('/home')"/>
      <div>{{ $t('new.desc') }}</div>
    </div>
    <div class="business-con">
      <div class="icon-list">
        <div class="icon-top">
          <div>{{ $t('new.desc47') }}</div>
          <div>{{ $t('new.desc48') }}</div>
          <div>{{ $t('new.desc49') }}</div>
        </div>
        <div class="inco-info">
          <div class="info-item" v-for="item in iconList" :key="item.id" @click="handlerInfo(item)"
               v-if="item.changeRate != 0">
            <div><img :src="item.icon" alt=""/>{{ item.name }}</div>
            <div :class="{ color1: item.color == 1, color2: item.color == 2 }">${{ item.closingprice }}
            </div>
            <div :class="item.changeRate > 0 ? 'iconbg' : ''"><span v-if="item.changeRate > 0">+</span>{{
                item.changeRate
              }}%
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: .4rem"></div>
    <bottom_nav :activeTitle="activeTitle"></bottom_nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobile: localStorage.getItem('ismobile'),
      activeTitle: this.$t('new.desc'),
      iconList: [
        // {
        //     code: 'ethusdt',
        //     name: 'ETH',
        //     changeRate: 0,
        //     closingPriceCny: 0,
        //     icon: '',
        //     color: 0,
        //     buyCoinId:0
        // },
        // {
        //     code: 'btcusdt',
        //     name: 'BTC',
        //     changeRate: 0,
        //     closingPriceCny: 0,
        //     icon: '',
        //     color: 0,
        //     buyCoinId:0
        // },
        // {
        //     code: 'ltcusdt',
        //     name: 'LTC',
        //     changeRate: 0,
        //     closingPriceCny: 0,
        //     icon: '',
        //     color: 0,
        //     buyCoinId:0
        // }
      ],
      socket: null
    }
  },
  mounted() {
    this.$post(this.URL.member.iconListConfig, {}).then(res => {
      if (res.code == 0) {
        res.data.forEach(e => {
          // let info = res.data.find(item => item.buyCoinName == e.name);
          e.code = e.buyCoinName.toLowerCase() + e.sellCoinName.toLowerCase();
          e.sellCoinId = e.sellCoinId;
          e.buyCoinId = e.buyCoinId;
          e.name = e.buyCoinName;
          e.changeRate = 0;
          e.closingPriceCny = 0;
          e.color = 0;
          e.icon = e.icon
        })
        this.iconList = res.data;
        console.log(this.iconList)
        this.getData();

      }
    })
  },
  methods: {


    handlerInfo(item) {
      this.$router.push(`/business/info?id=${item.name}&code=${item.code}&coinid=${item.buyCoinId}&sellCoinId=${item.sellCoinId}`)
    },
    getData() {
      let _this = this;
      if (typeof WebSocket == "undefined") {
      } else {
        _this.socket = new WebSocket(process.env.WSS_URL_API)
        _this.socket.onopen = function () {
          _this.socket.send('start:topic=market_list')
        };
        console.log(_this.socket.onmessage, 'm')
        //获得消息事件
        _this.socket.onmessage = function (msg) {
          let data = JSON.parse(msg.data);
          console.log(data, 's')
          if (data.data != undefined) {
            _this.iconList.forEach(e => {
              let info = data.data.find(item => item.code == e.code);
              if (info != undefined) {
                e.changeRate = info.changeRate;
                if (parseFloat(e.closingprice) > parseFloat(info.closingPrice)) {
                  e.color = 2
                } else if (parseFloat(e.closingprice) < parseFloat(info.closingPrice)) {
                  e.color = 1
                } else {
                  e.color = 0
                }
                e.closingprice = info.closingPrice;

                if (e.icon == '') {
                  e.icon = info.icon;
                }
              }
            })
          }
        };
        //关闭事件
        _this.socket.onclose = function () {
          console.log('关闭')
          // _this.getData();
        };
        //发生了错误事件
        _this.socket.onerror = function () {
          //_this.getData();
          console.log('错误')
          //此时可以尝试刷新页面
        };
      }
    }
  },
  destroyed() {
    this.socket.close()
  }
}
</script>

<style lang="less" scoped>
.business {
  background: #F7F9FC;

  .home-top {
    position: relative;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: .88rem;
    background: #fff;

    z-index: 8;

    .home-icon {
      position: absolute;
      top: .21rem;
      left: .27rem;
      height: 0.46rem;
    }

    div {
      font-size: .32rem;
      line-height: .88rem;
      text-align: center;
    }
  }

  .business-con {
    padding: .88rem 15px;

    .icon-list {
      .icon-top {
        display: flex;

        div {
          padding: .2rem 0 .16rem;
          font-size: .22rem;
          flex: 0 0 2.5rem;

          &:first-child {
            flex: 0 0 2.2rem;

          }

          &:nth-child(2) {
            flex: 1;
          }

          &:last-child {
            text-align: right;
          }
        }
      }

      .info-item {
        padding: 0.28rem 0;
        border-bottom: 1px solid #ebebeb;
        display: flex;

        div {
          flex: 0 0 1.6rem;
          line-height: .6rem;
          font-size: .28rem;

          &:first-child {
            flex: 0 0 2.2rem;
            display: flex;

            img {
              width: .54rem;
              height: .54rem;
              margin: .03rem .2rem 0 0;
              font-size: .28rem;
            }
          }

          &:nth-child(2) {
            flex: 1;
          }

          &:last-child {
            height: .6rem;
            background: linear-gradient(-90deg, #f53839 0%, #f95657 100%);
            border-radius: 0.12rem 0.12rem 0.12rem 0.12rem;
            font-size: .26rem;
            color: #FFFFFF;
            text-align: center;
            line-height: .6rem;
          }
        }

        .iconbg {
          background: linear-gradient(-90deg, #00b77d 0%, #00d591 100%) !important;
        }

        .color1 {
          color: #F5435A;
        }

        .color2 {
          color: #00BA7E;
        }
      }
    }
  }
}
</style>
